<script setup>
import TopButtonCenter from "@/components/Pengyq/TopButtonCenter.vue";
import { onBeforeMount, ref } from "vue";
import { getShopList, openOrCloseApi } from "@/server/api/shopApi.js";
import { useRouter } from "vue-router";
import { useUseStore } from "@/stores/user";
import { showDialog } from "vant";
import id from "@/lang/id";
import { selectShopInfoListByShopId, deleteShopInfoById } from "@/server/api/shopApi.js";
import { ToastFun } from "@/hook/toast";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const ShopList = ref([])
const router = useRouter();
const value = ref(5);
const ing = useUseStore().ing;
//酒店分类
const shopCategoryList = ref(["sdfsd", "fwefw", "dfssd"]);
const limit = 60;
const page = 1;
const uid = useUseStore().userId;

function getShopListFun(l, p, u) {
  getShopList(l, p, u).then((data) => {
    ShopList.value = data.data.data.list;
    // ShopList.value.forEach((item) => {
    //   if (item.userImage != null) {
    //     let ImgList = item.userImage.split(".");
    //     item.userImage = ing + ImgList[0] + "_90_100." + ImgList[1];
    //   }
    // });

    return {
      ShopList,
    };
  });
}
const RouterLIn = (index) => {
  if (shopCategoryList.value.includes(ShopList.value[index].categoryId)) {
    router.push({
      path: `/ManageHotelRoom`,
      query: {
        data: JSON.stringify(ShopList.value[index]),
      },
    });
  } else {
    router.push({
      path: `/MangeShopListChild`,
      query: {
        data: JSON.stringify(ShopList.value[index]),
      },
    });
  }
};
//根据id 打烊 营业 店铺
const openOrClose = async (shopId, status, index) => {
  ToastFun("Loading", { duration: 1000 });
  const res = await openOrCloseApi(shopId, status);
  if (res.data.code === 200) {
    ShopList.value[index].status = status ? '1' : '0';
    ToastFun(t("pay.success2"));
    // location.reload();
  } else {
    ToastFun("");
  }
}

onBeforeMount(() => {
  getShopListFun(limit, page, uid);
});
</script>

<template>
  <TopButtonCenter :title="$t('me.manage.shop.title')" />

  <div class="ManageShopList">
    <ul class="list">
      <li v-for="(i, index) in ShopList" :key="index">
        <header>
          <div class="left">
            <div class="login">
              <img v-lazy="i.userImage || `/images/pipayshop_logo.png`" alt="" />
            </div>
            <div class="right_tex" @click="RouterLIn(index)">
              <h5>{{ i.shopName }}</h5>
              <div class="totol">
                {{ i.follows }} Fans
                <div style="margin-left: 20rem; display: inline-block">
                  {{ i.score }}
                  <van-rate v-model="i.score" :size="15" :count="i.score ? Number(String(i.score)[0]) : 0"
                    color="#ffd21e" void-icon="star" void-color="#eee" readonly />
                </div>
              </div>
              <img class="clickImg" src="/images/click.png">
            </div>
          </div>
          <!-- 下架 -->
          <button class="off" v-if="i.status == 0" @click="openOrClose(i.shopId, 1, index)">{{ $t("me.manage.down")
            }}</button>
          <!-- 上架 -->
          <button class="off" v-else-if="i.status == 1" @click="openOrClose(i.shopId, 0, index)">{{ $t("me.manage.up")
            }}</button>
        </header>
      </li>
    </ul>
  </div>
</template>

<style lang="scss" scoped>
.ManageShopList {
  font-size: 14rem;
  padding: 60rem 10rem 0;

  .list {
    li {

      header {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 30rem;
        padding: 10rem 0;
        align-items: center;
        border-bottom: 1rem solid #d2d2d2;

        //上下架按钮
        .off {
          width: 100rem;
          height: 35px;
          right: 0px;
          /* 设置圆角半径 */
          border-radius: 20px;
          border: 2px solid purple;
          background-color: transparent;
        }

        .left {
          display: flex;
          flex: 1;

          .right_tex {
            line-height: 35rem;
            margin: 0 10rem;

            >h5 {
              font-size: 16rem;
              font-weight: 500;
            }

            .totol {
              color: #d2d2d2;
            }

            .clickImg {
              width: 30rem;
            }
          }

          .login {
            width: 70rem;
            height: 70rem;
            overflow: hidden;
            border-radius: 50%;

            img {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
          }
        }
      }
    }
  }
}
</style>